<template>
  <div>
    <div class="warningPage">
      <CaseTitle :position="$route.path" :title="$route.meta.title" :subtitle="$route.meta.subtitle" />
      <div class="warningPage">
        <div class="warningSide">
          <div class="waringTip">
            <div class="tipContent">
              <div v-for="item in subtitles" :key="item.subtitle" class="tipList">
                <div
                  v-if="item.subtitle.length < 14"
                  :key="item.path"
                  :class="['tipText text-clamp', $route.path.indexOf(item.path) >= 0 ? 'tab-item-box_active' : 'tab-item-box_common']"
                  @click="toPath(item)"
                >{{ item.subtitle }}</div>
                <div
                  v-else
                  :key="item.path"
                  :class="['tipTextMore', $route.path.indexOf(item.path) >= 0 ? 'tab-item-box_active' : 'tab-item-box_common']"
                  @click="toPath(item)"
                >
                  {{ item.subtitle.slice(0,4) }}<br>{{item.subtitle.slice(4,11)}}<br>{{item.subtitle.slice(11,15)}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="warningLeft">
          <div>
            <div class="warningLeftTitle">
              <span />
              <p>{{ $route.meta.subtitle }}</p>
            </div>
            <div class="warningInner">
              <!-- 案例展示 -->
              <div v-for="(item, index) in caseData" :key="index" class="caseBox">
                <!-- <div :class="[item.imageId ? 'caseInfo2' : 'caseInfo1']"> -->
                <div class="caseInfo1">
                  <img :src="require('@/assets/images/icon5.png')" alt="">
                  <div class="caseTitle" @click="toArticle(item, index)">
                    {{ item.noticeTitle }}
                  </div>
                  <div class="caseDate">{{ item.pushTime.slice(5,10) }}</div>
                </div>
              </div>
              <!-- 分页器 -->
              <div class="pagination">
                <el-pagination
                  v-if="caseData.length"
                  background
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  :current-page="current"
                  layout="prev, pager, next, sizes, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CaseTitle from '@/components/common/CaseTitle';
import { GetContentNoticeList, GetContentTypeList } from '@/api/contentnotice'

export default {
  name: 'CaseBody',
  components: {
    CaseTitle
  },
  props: {
    searchContent: {
      default: '',
      type: String
    },
    needType: {
      type: Boolean,
      default: true
    },
    // eslint-disable-next-line vue/require-default-prop
    subtitles: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      typeList: [],
      dataType: '',
      pageSize: 10,
      current: 1,
      total: 1,
      basicUrl: '',
      caseData: []
    };
  },
  computed: {},
  watch: {
    // 搜索
    searchContent(newVal, oldVal) {
      this.getData();
    }
  },
  created() {
    this.basicUrl = window.location.origin + '/api/';
    if (this.needType) {
      this.getType();
    } else {
      this.getData();
    }
  },
  mounted() {},
  methods: {
    toPath(item) {
      this.$router.push(item.path)
    },
    getType() {
      const formData = new FormData()
      // 第一个值是key,第二个是value
      formData.append('current', 1)
      formData.append('size', 999)
      const params = new URLSearchParams(formData)
      GetContentTypeList(params).then((res) => {
        this.typeList = res.data.records;
        this.typeList.forEach((item) => {
          if (item.typeName === this.$route.meta.subtitle) {
            this.dataType = item.id;
            this.getData();
          } else if (this.$route.meta.subtitle === '搜索内容') {
            this.getData();
          }
        });
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getData();
    },
    // 获取内容列表
    async getData() {
      const obj = {
        current: this.current,
        size: this.pageSize,
        noticeTitle: this.searchContent,
        typeId: this.needType ? this.dataType : '',
        status: 4
      };
      try {
        const result = await GetContentNoticeList(obj);
        this.caseData = result.data.records;
        this.total = result.data.total;
      } catch (e) {
        console.log(e);
      }
    },
    // 跳转内容页
    toArticle(item, index) {
      const obj = {
        id: item.id
      };
      this.$router.push({ path: '/article', query: obj });
    }
  }
};
</script>

<!--<style lang="scss" scoped>-->
<style lang="less" scoped>
@aaa: 192;
.warningPage {
  font-family: 思源黑体 CN Medium;
  margin: (-8rem / @aaa) auto 0 auto;
  width: (1660rem / @aaa);
  //min-height: (560rem / @aaa);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  .warningLeft {
    width: (1210rem / @aaa);
    //width: (970rem / @aaa);
    //width: (900rem / @aaa);
    height: 100%;
    min-height: (420rem / @aaa);
    display: flex;
    flex-direction: column;
    // margin-top: 35px;
    .warningInner {
      box-sizing: content-box;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .caseBox {
        height: (40rem / @aaa);
        width: 100%;
        padding: (14rem / @aaa) 0;
        display: flex;
        border-bottom: (1rem / @aaa) dashed #024da0;
        flex-direction: row;
        .caseInfo1 {
          width: 100%;
          display: flex;
          img {
            width: (8rem / @aaa);
            height: (8rem / @aaa);
            margin: auto (10rem / @aaa) auto (30rem / @aaa);
          }
          .caseTitle {
            height: (40rem / @aaa);
            // color: #254c8a;
            // text-align: left;
            font-size: (30rem / @aaa);
            //font-size: (26rem / @aaa);
            line-height: (40rem / @aaa);
            //字间距
            letter-spacing: (3rem / @aaa);
            width: 85%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:hover {
              cursor: pointer;
              color: #4497f7;
            }
          }
          .caseDate {
            text-align: right;
            margin-right: (9rem / @aaa);
            font-size: (26rem / @aaa);
            line-height: (40rem / @aaa);
            width: 10%;
          }
        }
      }
    }
    .warningLeftTitle {
      width: (1210rem / @aaa);
      //width: (970rem / @aaa);
      margin-bottom: (6rem / @aaa);
      padding: 0 0 (15rem / @aaa) (30rem / @aaa);
      border-bottom: (1rem / @aaa) solid #cbcbcb;
      height: (60rem / @aaa);
      //height: (50rem / @aaa);
      position: relative;
      p {
        position: absolute;
        top: 0;
        padding-left:(15rem /@aaa);
        //left: (15rem /@aaa);
        display: inline-block;
        font-size: (35rem / @aaa);
        //font-size: (28rem / @aaa);
        font-weight: 700;
      }
      span {
        position: absolute;
        top: 0;
        //margin-right: (10rem / @aaa);
        display: inline-block;
        width: (5rem / @aaa);
        height: (35rem / @aaa);
        //height: (26rem / @aaa);
        background-color: #4497f7;
      }
    }
    .pagination{
      margin-top: (24rem / @aaa);
      margin-bottom:(24rem / @aaa);
      text-align: right;
      /deep/ .el-pagination button{
        font-size: 30rem/@aaa;
      }

      /deep/ .el-pagination{
        padding: (2rem / @aaa) ;
        height: (44rem / @aaa) ;
        line-height: 44rem/@aaa;
        button{
          border-radius: (2rem / @aaa);
          height: (40rem / @aaa);
          line-height: (40rem / @aaa);
          width: (40rem / @aaa);
          .el-icon{
            font-size: (30rem / @aaa);
          }
        }
        li{
          font-size: 30rem/@aaa;
          height: (40rem / @aaa);
          line-height: (40rem / @aaa);
          width: (40rem / @aaa);
          border-radius: (2rem / @aaa);
        }
        input{
          border: (1rem / @aaa) solid #DCDFE6;
          font-size: 25rem/@aaa;
          height: (40rem / @aaa);
        }
        .el-select .el-input{
          width: (180rem / @aaa);
        }
        .el-select__caret{
          font-size: 25rem/@aaa;
        }

        .el-pagination__jump{
          margin-left: (24rem / @aaa);
          font-size: 30rem/@aaa;
          height: 40rem/@aaa;
          line-height: 40rem/@aaa;
          .el-input{
            width: (50rem / @aaa);
            height: 40rem/  @aaa;
            padding: 0 (2rem / @aaa);
            margin: 0 (2rem / @aaa);
          }
        }
      }
    }
  }

  .waringTip {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    // margin-top: 35px;

    .tipContent {
      .tipList {
        width: (400rem / @aaa);
        //width: (320rem / @aaa);
        //width: (250rem / @aaa);
        height: (120rem / @aaa);
        //height: (100rem / @aaa);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .tipText {
          width: (400rem / @aaa);
          //width: (320rem / @aaa);
          //width: (250rem / @aaa);
          font-size: (40rem / @aaa);
          //font-size: (36rem / @aaa);
          //display: inline-block;
          //letter-spacing: 10px;
          //cursor: pointer;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          -webkit-line-clamp: 1;
          line-height: (120rem / @aaa);
          //line-height: (100rem / @aaa);
          text-align: center;
          color: #fff;
          font-weight: 700;
          background-color: #024da0;
        }
        .tipTextMore{
          width: (400rem / @aaa);
          //width: (320rem / @aaa);
          font-size: (30rem / @aaa);
          //display: inline-block;
          //letter-spacing: 10px;
          //cursor: pointer;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          -webkit-line-clamp: 1;
          line-height: (50rem / @aaa);
          text-align: center;
          color: #fff;
          font-weight: 700;
          background-color: #024da0;
        }
        //.more{
        //  font-size: (20rem / @aaa);
        //}
        .tab-item-box_common{
          background-color: #024da0;
        }
        .tab-item-box_active{
          background-color: #1880E2;
        }
      }
    }
  }
}

</style>
